<template>
  <div>
    <div class="content">
      <div class="site-footer-top">
        <div>
          <ul>
            <li>
              <img
                src="https://www.maccosmetics.com.cn/media/export/cms/loyalty/sticky_footer_live_chat.png"
                alt=""
              />
            </li>
            <li>
              <a href="">热卖口红</a>
            </li>
            <li>
              <a href="">底妆精选</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="site-footer-center">
        <div>
          <ul class="first">
            <li>
              <h2>门店地址</h2>
            </li>
            <li>查找门店</li>
            <li>魅可定制美妆</li>
            <li><h2>会员</h2></li>
            <li>会员中心</li>
          </ul>
          <ul>
            <li>
              <h2>客户服务</h2>
            </li>
            <li>联系我们</li>
            <li>官方商城服务热线：</li>
            <li>400-602-9566</li>
            <li>专柜客户关怀热线：</li>
            <li>400-821-1308</li>
            <li>常见问题</li>
            <li>订单情况</li>
            <li>运输信息</li>
            <li>退换政策</li>
            <li>赠品标签查询通道</li>
          </ul>
          <ul>
            <li>
              <h2>关于我们</h2>
            </li>
            <li>品牌故事</li>
            <li>VIVA GLAM</li>
            <li>M·A·C魅可官网购物五大理由</li>
            <li>M·A·C魅可专业会员</li>
            <li><h2>公司地址</h2></li>
            <li>上海市静安区 延安中路1228号静安嘉里中心三座11楼</li>
          </ul>
          <ul>
            <li>
              <h2>账户</h2>
            </li>
            <li>账户</li>
            <li>订单状态</li>
            <li>我的收藏</li>
          </ul>
          <ul>
            <li>
              <h2>链接</h2>
            </li>
            <li>
              <img
                src="https://www.maccosmetics.com.cn/media/export/cms/icon_wechat_mac.png
"
              />
              <img
                src="https://www.maccosmetics.com.cn/media/export/cms/miniprogram.png
"
              />
              <img
                src="https://www.maccosmetics.com.cn/media/export/cms/icon_weibo_mac.png
"
              />
            </li>
            <li>
              <img
                class="ensure"
                src="https://www.maccosmetics.com.cn/media/images/global/trustmark_logo.png"
              />
            </li>
          </ul>
        </div>
      </div>
      <div class="site-footer-bottom">
        <div>
          <ul>
            <li>隐私保护</li>
            <li>条件条款</li>
            <li>产品真伪鉴别</li>
            <li>© MAKE-UP ART COSMETICS. ALL WORLDWIDE RIGHTS RESERVED.</li>
            <li>沪ICP备08005263号-3</li>
            <li>上海工商</li>
            <li>沪公网安备 31010602004728号</li>
            <li>
              <img
                src="https://www.maccosmetics.com.cn/media/export/cms/gongan.png"
                alt=""
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  .site-footer-top {
    width: 100%;
    height: 60px;
    background-color: #191919;
    div {
      ul {
        display: flex;

        li {
          padding: 0 20px;
          height: 25px;

          border-right: 2px solid white;
          margin: 22px 0;
          a {
            font-size: 14px;
            color: white;
          }
        }
      }
    }
  }
  .site-footer-center {
    width: 100%;
    height: 450px;
    background-color: #292929;
    color: white;
    padding-top: 40px;

    div {
      width: 1400px;
      display: flex;
      justify-content: space-evenly;
      margin: 0 auto;

      ul.first {
        margin-left: 0px;
      }
      ul {
        width: 170px;
        li {
          display: flex;
          line-height: 28px;
          font-size: 15px;
          h2 {
            line-height: 56px;
            font-size: 18px;
          }
          img {
            margin-right: 10px;
          }
          img.ensure {
            margin-top: 20px;
          }
        }
      }
    }
  }
  .site-footer-bottom {
    width: 100%;
    height: 90px;
    background-color: #000;

    div {
      display: flex;
      color: #949494;
      width: 1400px;
      margin: 0 auto;
      ul {
        display: flex;
        justify-content: flex-start;
        li {
          padding: 20px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
